<template>
    <div class="main">
        <div class="div1">查看</div>
        <div class="div2">
            <h3>雷军</h3>
            <p>性别：男</p>
            <p>创建：李四</p>
            <p class="time">2022/2/11 15:30:12</p>
        </div>
        <div class="div3">
            <div class="demo-image__preview item1">
                <el-image 
                    style="width: 100px; height: 100px"
                    :src="url" 
                    :preview-src-list="srcList">
                </el-image>
            </div>
            <div class="item2">
                <p><b>手机号码：</b>15230145236</p>
                <p><b>公司电话：</b>0818-253642</p>
                <p><b>传真：</b></p>
                <p><b>Email：</b>1854624352@163.com</p>
                <p><b>地址：</b>几点开始副教授复活甲</p>
                <p><b>备注：</b>啦啦啦啦啦啦</p>
            </div>
        </div>
        <div class="div4">
            <div>
                <el-button icon="el-icon-arrow-left" @click="fanHui()">返回</el-button>
            </div>
            <div>
                <el-button class="btn" icon="el-icon-printer">打印</el-button>
                <el-button type="primary" class="btn" icon="el-icon-edit-outline" @click="editor()">编辑</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{},
data(){
    return {
         url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        ]
    }
    },
    methods:{
        // 点击查看中的返回按钮，返回上一页
        fanHui(){
             this.$router.go(-1);
        },
        // 点击编辑，跳转到修改页面
        editor(){
            this.$router.push('/home/addressBook/addressBookHome/addressBookModify')
        }
    }
       
}
</script>
<style lang="less" scoped>
.main{
    background-color: white;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.div1{
    font-size: 18px;
    padding-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
}
.div2{
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
}
.div2 p{
    color: #999;
    font-size: 13px;
}
.time{
    text-align: right;
}
.div3{
    display: flex;
    flex-direction: column;
    padding: 20px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
}
.item1{
    padding-bottom: 20px;
    box-sizing: border-box;
}
.item2 p{
    padding-bottom: 10px;
    box-sizing: border-box;
}
.div4{
    padding-top: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

</style>